<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <base th:href="@{/}">
    <title>高校心理健康系统注册</title>
    <script src="../static/script/vue.js"></script>
    <script src="../static/script/axios.js"></script>
    <link type="text/css" rel="stylesheet" href="../static/css/style.css"/>
    <link rel="stylesheet" href="../static/css/register.css"/>
    <style type="text/css">
        .login_form {
            height: 420px;
            margin-top: 25px;
        }
    </style>
</head>
<body>
<div id="login_header">
    <a href="index.html">
        <img class="logo_img" alt="" src="static/img/logo.gif"/>
    </a>
</div>

<div class="login_banner">
    <div class="register_form">
        <h1>用户注册</h1>
        <form action="user?flag=registry" id="app" method="POST">
            <div class="form-item">
                <div>
                    <label>用户名称:</label>
                    <input type="text" placeholder="请输入用户名" v-model="username" name="username" @change="checkUsername"/>
                    <span v-text="msg"></span>
                </div>
                <span class="errMess" :style="nameErr">用户名应为6~16位数组和字母组成</span>
            </div>
            <div class="form-item">
                <div>
                    <label>用户密码:</label>
                    <input type="password" placeholder="请输入密码" v-model="password" name="password"/>
                </div>
                <span class="errMess" :style="passwordErr">密码的长度至少为8位</span>
            </div>
            <div class="form-item">
                <div>
                    <label>确认密码:</label>
                    <input type="password" placeholder="请输入确认密码" v-model="confirmPassword"/>
                </div>
                <span class="errMess" :style="confirmErr">密码两次输入不一致</span>
            </div>
            <div class="form-item">
                <div>
                    <label>用户邮箱:</label>
                    <input type="email" placeholder="请输入邮箱" v-model="email" required name="email" th:value="${param.email}"/>
                </div>
                <span class="errMess">请输入正确的邮箱格式</span>
            </div>
            <div class="form-item">
                <button class="btn" @click.prevent="sandEmail">发送验证码</button>
            </div>
            <div class="form-item">
                <div>
                    <label>验证码:</label>
                    <input type="text" placeholder="请输入验证码" required name="email" th:value="${param.email}"/>
                </div>
            </div>
            <button class="btn" @click="registry">注册</button>
        </form>
    </div>
</div>
<div id="bottom">
      <span>
        心理健康管理系统.Copyright &copy;2015
      </span>
</div>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            username: "",
            password: "",
            confirmPassword: "",
            email: "",
            msg: "",

            nameErr: "visibility:hidden",
            passwordErr: "visibility:hidden",
            confirmErr: "visibility:hidden"
        },
        methods: {
            registry: function (e) {
                // 获取到用户输入的用户名和密码箱，判断是否合法
                if (/^[a-zA-Z]\w{5,15}$/.test(this.username)) {  // 用户名合法
                    this.nameErr = "visibility:hidden";
                } else {  // 用户名不合法
                    this.nameErr = "visibility:visible";
                    e.preventDefault();
                }
                if (/^[0-9a-zA-Z!@#$%^&*()+]{8,}$/.test(this.password)) {  // 密码合法
                    this.passwordErr = "visibility:hidden";
                } else {  // 用户名不合法
                    this.passwordErr = "visibility:visible";
                    e.preventDefault();
                }
                if (this.password === this.confirmPassword) {  // 两次密码输入一致
                    this.confirmErr = "visibility:hidden";
                } else {
                    this.confirmErr = "visibility:visible";
                    e.preventDefault();
                }
            },
            checkUsername: function () {
                axios({
                    url: "user",
                    params: {
                        flag: "checkName",
                        username: this.username
                    }
                }).then(resp => {
                    this.msg = resp.data;
                });
            },
            sandEmail: function (e) { // 发送邮箱验证码
                this.show = false;
                const TIME_COUNT = 60;
                if (!this.timer) {
                    this.count = TIME_COUNT;
                    this.show = false;
                    this.timer = setInterval(() => {
                        if (this.count > 0 && this.count <= TIME_COUNT) {
                            this.count--;
                        } else {
                            this.show = true;
                            clearInterval(this.timer);
                            this.timer = null;
                        }
                    }, 1000)
                }

                axios({
                    "method":"post",
                    url: "sendNum",
                    params: {
                        flag: "checkName",
                        username: this.username,
                        email: this.email
                    }
                }).then(resp => {
                    this.msg = resp.data;
                });
            }
        }
    });
</script>
</body>
</html>
